<template>
  <div>
    <!-- 用户信息 已登录 -->
    <div class="user-info" v-if="isLogin">
      <div class="avatar">
        <span class="revise"></span>
      </div>
      <div class="info">
        <div class="phone-number">{{ phoneNumber }}</div>
        <div class="id">ID：{{ id }}</div>
      </div>
      <i class="iconfont icon-notice"></i>
    </div>
    <!-- 用户信息 未登录 -->
    <div class="user-info" v-else>
      <div class="avatar avatar-off"></div>
      <div class="go-log-in">
        <router-link to="/login">点击登录</router-link>
      </div>
    </div>
    <!-- vip -->
    <div class="vip"></div>
    <ul class="options">
      <li class="learned">
        <i></i>
        <p>我的已学</p>
        <span class="right"></span>
      </li>
      <li class="download">
        <i></i>
        <p>我的下载</p>
        <span class="right"></span>
      </li>
      <li class="star">
        <i></i>
        <p>我的收藏</p>
        <span class="right"></span>
      </li>
      <li class="follow">
        <i></i>
        <p>我的关注</p>
        <span class="right"></span>
      </li>
      <li class="thumb">
        <i></i>
        <p>我的点赞</p>
        <span class="right"></span>
      </li>
      <li class="album">
        <i></i>
        <p>专辑</p>
        <span class="right"></span>
      </li>
      <li class="set" @click="goTheOptions">
        <i></i>
        <p>设置</p>
        <span class="right"></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "UserInfo",
  data() {
    return {
      isLogin: false,
      phoneNumber: "150****507",
      id: "18604599",
    };
  },
  methods: {
    // 跳转登录页
    goLogIn() {
      this.$router.push("/logIn");
    },
    // 跳转设置
    goTheOptions() {
      this.$router.push("/theOptions");
    },
  },
};
</script>

<style lang="less" scoped>
.user-info {
  width: 100%;
  height: 1.1587rem;
  padding: 0 0.2997rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .avatar {
    width: 1.1587rem;
    height: 100%;
    position: relative;
    background: url("@/assets/images/userInfo/avatar-blue.png") no-repeat
      center/100% 100%;

    .revise {
      display: block;
      width: 0.3596rem;
      height: 0.3596rem;
      position: absolute;
      right: 0;
      bottom: 0;
      background: url("../assets/images/userInfo/revise.png") no-repeat
        center/100% 100%;
    }
  }
  .avatar-off {
    background: url("../assets/images/userInfo/avatar-gray.png") no-repeat
      center/100% 100%;
  }

  .info {
    margin-right: 3.1963rem;
    font-size: 0.3196rem;
    color: #000;

    .phone-number {
      font-size: 0.3196rem;
    }

    .id {
      font-family: "黑体";
      font-size: 0.2597rem;
    }
  }
  .go-log-in {
    width: 5.5rem;
    font-size: 0.2997rem;
  }
}
.vip {
  width: 6.972rem;
  height: 1.3584rem;
  margin: 0.4994rem auto 0;
  background: url("@/assets/images/userInfo/vip.png") no-repeat center/100% 100%;
}
.options {
  padding: 0.1998rem 0.2997rem 0;
  box-sizing: border-box;
  font-size: 0.2397rem;
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.9989rem;
    border-bottom: 0.01rem rem solid #f2f2f2;
    i {
      display: block;
      width: 0.3995rem;
      height: 0.3995rem;
    }
    p {
      width: 6rem;
    }
    .right {
      display: block;
      width: 0.2597rem;
      height: 0.4795rem;
      background: url("@/assets/images/userInfo/right.png") no-repeat
        center/100% 100%;
    }
  }
}
.options li.learned i {
  background: url("@/assets/images/userInfo/f1.png") no-repeat center/100% 100%;
}
.options li.download i {
  background: url("@/assets/images/userInfo/f2.png") no-repeat center/100% 100%;
}
.options li.star i {
  background: url("@/assets/images/userInfo/f3.png") no-repeat center/100% 100%;
}
.options li.follow i {
  background: url("@/assets/images/userInfo/f4.png") no-repeat center/100% 100%;
}
.options li.thumb i {
  background: url("@/assets/images/userInfo/f5.png") no-repeat center/100% 100%;
}
.options li.album i {
  background: url("@/assets/images/userInfo/f6.png") no-repeat center/100% 100%;
}
.options li.set i {
  background: url("@/assets/images/userInfo/f7.png") no-repeat center/100% 100%;
}
.options li.quit i {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
</style>
